<template>
  <div class="SearchVideo">
    <div class="tip">找到 {{ searchVideoCount }} 个视频</div>
    <video-list-card
      :videoList="searchVideoList"
      :videoType="'video'"
      @clickListCardItem="clickListCardItem"
    ></video-list-card>
    <!-- 分页 -->
    <div class="page" v-if="searchVideoList.length !== 0">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="searchVideoCount"
        small
        :page-size="30"
        :current-page="currentPage"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import videoListCard from "../../../../components/videoListCard/videoListCard";

export default {
name: "searchVideo",
  data() {
    return {
      //搜索歌曲视频总数
      searchVideoCount: 0,
      searchVideoList: [],
      currentPage: 1,
    };
  },
    methods:{
      //点击歌曲歌手视频回调
    clickListCardItem(params) {
      let id = params.id,
        type = params.type;
      if (type === 0) {
        this.$router.push({ name: "videoDetail", params: { id, type: "mv" } });
      } else {
        this.$router.push({
          name: "videoDetail",
          params: { id, type: "video" },
        });
      }

    },
    //  分页点击回调
    pageChange(page) {
      //点击页获取
      this.currentPage = page;
      //获取点击页切换时，清空原有数据
      this.searchVideoList = [];
      //再次获取
      this.GetSearchSingerVideoList();
    },
    //  获取歌曲歌手专辑列表
    async GetSearchSingerVideoList() {
      /*
      可选参数 : limit : 返回数量 , 默认为 30 offset : 偏移数量，用于分页 , 如 : 如 :( 页数 -1)*30,
      其中 30 为 limit 的值 , 默认为 0
      type: 搜索类型；默认为 1 即单曲 ,
      取值意义 : 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV,
      1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合
      */
      let res = await this.$request('/cloudsearch', {
        keywords: this.$route.params.id,
        offset: (this.currentPage - 1) * 30,
        type: 1014
      })
      console.log(res)
      //视频总数
      this.searchVideoCount = res.data.result.videoCount;
      //视频列表
      this.searchVideoList = res.data.result.videos
    }
  },
    created() {
    this.GetSearchSingerVideoList()
  },
//  注册组件
  components:{
    videoListCard,
  }
}
</script>

<style scoped lang="less">
.SearchVideo{
  width: 100%;
  .tip {
    text-align: left;
    font-weight: bold;
    color: #222222;
    margin-bottom: 10px;
}

.page {
  width: 100%;
  text-align: center;
  padding-bottom: 20px;
  margin: 20px 0;
}
}

</style>
